<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">gg-picker2</view>
      <view class="components-title-d">两级联动下拉选项</view>
    </view>
    <gg-nav-group label="无默认选项时，会默认选中第一条">
      <gg-picker2 label="两级联动选择" v-model="formData.picker" :dataLists="pickerLists" />
    </gg-nav-group>
    <gg-nav-group label="有默认选项">
      <gg-picker2 label="两级联动选择" v-model="formData.picker2" :dataLists="pickerLists" />
    </gg-nav-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        picker: [],
        picker2: ['0', '03'],
      },
      pickerLists: [
        {
          value: 0,
          valuea: 'a',
          text: '橘子',
          free: [
            { value: '01', text: '橘子汁' },
            { value: '02', text: '橘子汁1' },
            { value: '03', text: '橘子汁2' }
          ]
        },
        {
          value: 1,
          valuea: 'b',
          text: '柠檬',
          free: [
            { value: '01', text: '柠檬汁' },
            { value: '011', text: '柠檬汁1' }
          ]
        },
        {
          value: 2,
          valuea: 'c',
          text: '香蕉',
          free: [
            { value: '01', text: '香蕉汁' }
          ]
        },
        {
          value: 3,
          valuea: 'd',
          text: '苹果',
          free: [
            {
              value: '01',
              text: '苹果汁'
            }
          ]
        },
        {
          value: 4,
          valuea: 'e',
          text: '榴莲',
          free: [
            { value: '01', text: '留恋汁' }
          ]
        },
      ],
    };
  },
  onLoad() { },
  methods: {

  }
}
</script>

<style>
page {
  background: #f1f1f1;
}
</style>
